<template>
	<view class="category-container">
    <cu-custom bgColor="bg-gradual-orange"><block slot="content">七月画室</block></cu-custom>
    <view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:85vh; width: 22vw;">
				<view class="cu-item" :class="{navItemCur: item.id==tabCur}" v-for="item in list" :key="item.id" @tap="TabSelect"
				 :data-id="item.id">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:85vh;"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top padding-lr" v-for="item in list" :key="item.id" :id="'main-'+item.id">
					<view class="cu-bar solid-bottom bg-gradual-orange">
						<view class="action">
							<text class="icon-title text-white"></text>{{item.name}}
            </view>
            <view class="action" @tap="onMore(item.id)">
              <text class="text-white">更多 >></text>
            </view>
					</view>
          <card-list :cardList="item.cardList" :isCard="isCard"></card-list>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
  import categoryData from '../../data/category.js'
  import CardList from '../../components/home/card-list.vue'
  export default {
    components: {
      CardList
    },
		data() {
			return {
        isCard: true,
        list: categoryData.cardsInfo,
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true
			}
		},
		methods: {
      onMore (id) {
        uni.navigateTo({
        	url: '/pages/more/more?id='+id
        })
      },
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().in(this).select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						// console.log(scrollTop)
						return false
					}
				}
			}
		}
	}
</script>

<style>
  .category-container {
  }
    
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
    transition: font-size 0.2s;
	}
  
  .navItemCur {
    font-size: 38upx;
    color: var(--orange);
  }

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
